<template>
  <div class="about">
     <el-table
     :data="showList"
     border
     style="width: 100%">
        <el-table-column
        prop="uid"
        label="用户id">
        </el-table-column>
        <el-table-column
        prop="nickname"
        label="姓名">
        </el-table-column>
        <el-table-column
        prop="mobile"
        label="手机号">
        </el-table-column>
        <el-table-column
        prop="status"
        label="状态">
        </el-table-column>
        <el-table-column
        prop="avatar"
        label="头像">
          <template slot-scope="prop">
            <img :src="prop.row.avatar"/>
          </template>
        </el-table-column>
        <el-table-column
        prop="date"
        label="日期">
        </el-table-column>
        <el-table-column
        label="操作"
        width="120px">
          <template>
            <el-button icon="el-icon-search" size="mini"></el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          </template>
        </el-table-column>
     </el-table>
     <el-pagination
     background
     layout="prev, pager, next"
     :total="userList.length"
     :page-size="5"
     @next-click="onClickNext"
     @prev-click="onClickPre"
     >
     </el-pagination>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data(){
    return{
      userList:[],
      showList:[],
      startIndex:0,
      endIndex:5,
      offset:5
    }
  },
  methods:{
    onClickNext(){
     this.startIndex+=this.offset;
     this.endIndex+=this.offset;
     if(this.endIndex>this.userList.length){
       this.endIndex=this.userList.length;
     }
     this.showList = [];
     for(let index=this.startIndex;index<this.endIndex;index++){
       this.showList.push(this.userList[index])
     }
    },
    onClickPre(){
      this.startIndex-=this.offset;
      if(this.startIndex < 0){
        this.startIndex = 0;
      }

      if(this.endIndex === this.userList.length){
        if(this.userList.length%5===0){
          this.endIndex-=this.offset
        }else{
          this.endIndex-=(this.userList.length%5)
        }
      }else{
        this.endIndex-=this.offset 
      }
      this.showList = [];
      for(let index=this.startIndex;index<this.endIndex;index++){
       this.showList.push(this.userList[index])
      }

    }
  },
  mounted(){
    axios.get("http://localhost:8080/list.json").then((res)=>{
      console.log(res)
      this.userList = res.data;
      for(let index=this.startIndex;index<this.endIndex;index++){
        this.showList.push(this.userList[index])
      }
    })
  }
}
</script>

<style>
.about
{
  width: 100%;
}

img
{
  width: 40px;
  height: 40px;
}
</style>